<template>
    <SearchHeader v-model:informList="informList" v-model:searchForm="searchForm" v-model:loading="loading"
                  v-model:total="total" v-model:currentPage="currentPage" v-model:pageSize="pageSize"
    />
    <el-main>
        <el-card v-loading="loading">
            <div v-if="informList.length" class="list">
                <el-table :data="informList" style="width: 100%" stripe lazy highlight-current-row
                          @row-click.self="check" :row-key="row => row.id">
                    <el-table-column fixed type="index" label="序号" width="75px" align="center"/>
                    <el-table-column prop="title" label="主题" width="auto" align="center"/>
                    <el-table-column prop="startTime" :formatter="formattedDate" label="发布日期" width="160px"
                                     sortable align="center"/>
                </el-table>
            </div>
            <el-empty v-else :image-size="200"/>
            <Pagination v-model:informList="informList" :searchForm="searchForm" v-model:loading="loading"
                        :total="total" v-model:currentPage="currentPage" v-model:pageSize="pageSize"
            />
        </el-card>
    </el-main>
</template>

<script setup>
import {reactive, ref} from 'vue'

import {useRouter} from "vue-router"
//分页
import Pagination from "@/views/Inform/components/Pagination.vue";
import SearchHeader from "@/views/Inform/components/SearchHeader.vue";

const router = useRouter()

let show = ref(false)
//项目列表
let loading = ref(true)
let informList = ref([])
//名称搜索框
let searchForm = reactive({

})
//分页信息
let total = ref(0)
let currentPage = ref(1)
let pageSize = ref(10)

const check = row => {
    const {href} = router.resolve({
        name: "previewInform",
        params: {id: row.id}
    })
    window.open(href, "_blank")
}
//日期格式化
const formattedDate = row => {
    if (!row.date) return
    const date = new Date(row.date)
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`
}
</script>

<style scoped lang="scss">

.list {
    margin: 10px 0;
}
</style>

